<template>
  <div id="login">
    <div class="container">
      <!-- 喜马拉雅图片 -->
      <router-link to="/home">
        <div class="img">
          <img
            src="	https://award.xmcdn.com/yx/fe-passport/last/dist/images/new-logo-m@2x_2909eca.png"
            alt=""
          />
        </div>
      </router-link>

      <!-- 切换登录方式 -->
      <van-tabs
        v-model:active="active"
        color="coral"
        title-active-color="coral"
        line-width="100px"
        line-height="1px"
      >
        <van-tab title="密码登录">
          <form class="login-form">
            <input
              v-model="phone"
              type="text"
              class="form-input"
              placeholder="请输入手机号"
            />
            <input
              v-model="password"
              type="text"
              class="form-input"
              placeholder="请输入密码"
            />
          </form>
          <button @click="passwordLogin" type="submit" class="form-submit">
            登录
          </button>
        </van-tab>
        <van-tab title="验证码登录">
          <input
            v-model="phone"
            type="text"
            class="form-input"
            placeholder="请输入手机号"
          />
          <input
            v-model="code"
            type="text"
            class="form-input"
            placeholder="请输入验证码"
          />
          <button @click="getCode" class="getcode">获取验证码</button>
          <button @click="codeLogin" type="submit" class="form-submit">
            登录
          </button>
        </van-tab>
      </van-tabs>
      <!-- 勾选协议 -->
      <p
        style="
          font-size: 12px;
          line-height: 1.42;
          color: #999;
          margin-top: 20px;
        "
        class="tc"
      >
        <input
          type="checkbox"
          id="radio"
          class="agree-radio"
          :checked="isagree"
          @change="chageIsagree"
        /><label for="radio" class="agree-label"><span></span></label
        >首次登录会自动创建新账号，且代表同意<a
          href="/page/register_rule"
          class="em"
          >《用户服务协议》</a
        ><span>和</span
        ><a href="/page/privacy_policy" class="em">《隐私政策》</a>
      </p>

      <!-- 其他登录方式 -->
      <h4>—————— 其他登录方式 ——————</h4>
      <!-- QQ或者新浪微博 -->
      <div class="other">
        <van-icon style="font-size: 52px; color: skyblue" name="qq" />

        <van-icon
          style="font-size: 52px; color: rgb(246, 52, 26)"
          name="weibo"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  watch,
  ref,
  reactive,
  onMounted,
} from 'vue';

export default defineComponent({
  name: 'Login',
});
</script>

<script setup lang="ts">
import { Tab, Tabs, icon, showNotify } from 'vant';
import { phoneReg, pwdReg, codeReg } from '@/utils/LNFreg.ts';

import { reqGetToken, reqGetUserInfo } from '@/api/LNFuser';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();

const code = ref(); //验证码
const phone = ref(); //手机号码
const password = ref(); //密码
const isagree = ref(false);

//-----点击获取验证码获取验证码-------
const getCode = async () => {
  if (phoneReg.test(phone.value)) {
    //获取验证码

    code.value = 111111;
    showNotify({
      type: 'success',
      message: `验证码获取成功,验证码为111111`,
    });
  } else {
    showNotify({ type: 'danger', message: '请输入正确的手机号' });
    return;
  }
};
//----点击勾选按钮 改变勾选状态-----
const chageIsagree = () => {
  isagree.value = !isagree.value;
};

//------点击密码登录时的登录按钮-----
const passwordLogin = async () => {
  //校验表单

  if (!phoneReg.test(phone.value)) {
    showNotify({ type: 'danger', message: '请输入正确的手机号' });
    return;
  }

  if (!pwdReg.test(password.value)) {
    showNotify({ type: 'danger', message: '密码错误,必须为6位数请检查' });
    return;
  }
  if (!isagree.value) {
    showNotify({ type: 'danger', message: '请勾选协议' });
    return;
  }

  //去登陆
  //使用用户的手机号和密码去兑换token
  const res = await reqGetToken({
    phone: phone.value,
    password: password.value,
  });
  // console.log(res);
  //将获取到的token存储
  localStorage.setItem('token', res.data.token);

  //将存储的token设置再请求头中

  //发送请求获取用户信息

  const result = await reqGetUserInfo();
  console.log(result, '用户信息');

  //将个人信息也存储
  localStorage.setItem('userInfo', JSON.stringify(res.data));
  //提示用户登录成功
  showNotify({ type: 'success', message: '登录成功' });
  //跳转到首页
  // router.replace({path:'/home'})
  router.go(-1)
};

//------点击验证码登录时的登录按钮-----
const codeLogin = async () => {
  //校验表单

  if (!phoneReg.test(phone.value)) {
    showNotify({ type: 'danger', message: '请输入正确的手机号' });
    return;
  }

  if (!codeReg.test(code.value)) {
    showNotify({ type: 'danger', message: '验证码错误' });
    return;
  }

  if (!isagree.value) {
    showNotify({ type: 'danger', message: '请勾选协议' });
    return;
  }

  //去登陆
  //使用用户的手机号和密码去兑换token
  const res = await reqGetToken({
    phone: phone.value,
    password: password.value,
  });
  // console.log(res);
  //将获取到的token存储
  localStorage.setItem('token', res.data.token);

  //将存储的token设置再请求头中

  //发送请求获取用户信息

  const result = await reqGetUserInfo();
  console.log(result, '用户信息');

  //将个人信息也存储
  localStorage.setItem('userInfo', JSON.stringify(res.data));
  //提示用户登录成功
  showNotify({ type: 'success', message: '登录成功' });
  //跳转到首页
  router.go(-1)
};
</script>

<style scoped>
.container {
  width: 80%;
  text-align: center;
  margin: 30px auto;
}
.container .img img {
  margin-bottom: 40px;
  width: 250px;
}
login-form {
  margin-top: 30px;
}

.form-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: none;
  /* border-bottom: 2px solid #ff6600; */
  outline: none;
  font-size: 16px;
  color: #333;
}

.form-submit {
  width: 100%;
  padding: 10px;
  background-color: #3b3b3b;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
.getcode {
  font-size: 14px;
  height: 30px;
  line-height: 15px;
  margin-bottom: 15px;
}
h4 {
  font-weight: normal;
  width: 100%;
  margin: 30px auto;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #ccc;
}
.other {
  display: flex;
  justify-content: space-evenly;
}
</style>
